<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/boot.js"></script>
    <script src="plugins/brower/browser.min.js"></script>
    <script src="plugins/calendar/lunar.js"></script>
    <style>
        .console-container {
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
    </style>
    <style>
        .huangli {
            margin-bottom: 20px;
            position: relative;
            border: 2px solid #000;
            background: #fff;
            width: 380px;
            color: #000;
            font-size: 14px;
            zoom: 1;
            overflow: hidden;
        }

        .huangli i {
            font-style: normal;
            color: #999;
        }

        .huangli b {
            font-weight: normal;
        }

        .huangli:before,
        .huangli:after,
        .yiji:before {
            content: '';
            position: absolute;
            left: 90px;
            font-size: 0;
        }

        .huangli:before {
            top: 0;
            width: 0;
            height: 300px;
            border-right: 1px solid #BBB;
        }

        .huangli:after {
            left: 0;
            top: 300px;
            width: 100%;
            height: 0;
            border-bottom: 1px solid #BBB;
        }

        .yiji:before {
            top: 220px;
            width: 100%;
            height: 0;
            border-bottom: 1px solid #BBB;
        }

        #md {
            position: absolute;
            left: 20px;
            top: 20px;
            width: 30px;
            font-size: 25px;
            color: #000;
        }

        #ymd {
            position: absolute;
            left: 60px;
            top: 0;
            width: 13px;
            font-size: 13px;
        }

        #ymd i {
            display: block;
            margin-top: 10px;
        }

        .nayin,
        .chongsha,
        .pengzu {
            position: absolute;
            left: 130px;
        }

        .nayin i,
        .chongsha i {
            margin-left: 20px;
        }

        .nayin {
            top: 30px;
        }

        .chongsha {
            top: 90px;
        }

        .pengzu {
            top: 160px;
        }

        .pengzu i {
            position: absolute;
            left: 50px;
            top: -1em;
            width: 120px;
        }

        .xishen,
        .fushen,
        .caishen {
            position: absolute;
            top: 240px;
        }

        .xishen {
            left: 130px;
        }

        .fushen {
            left: 215px;
        }

        .caishen {
            left: 300px;
        }

        .xishen i,
        .fushen i,
        .caishen i {
            display: block;
        }

        .yiji {
            margin-left: 25px;
            margin-top: 320px;
        }

        .yiji.ji {
            margin-top: 20px;
        }

        .yiji b {
            margin-right: 4px;
            padding: 2px 4px;
            color: #fff;
            background: green;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            border-radius: 50%;
        }

        .yiji i {
            line-height: 1.5em;
            margin-right: 10px;
        }

        .yiji.ji b {
            background: red
        }

        .shen {
            margin-left: 22px;
            margin-top: 20px;
        }

        .shen.xiong {
            margin-bottom: 20px;
        }

        .shen i {
            line-height: 1.5em;
            margin-right: 10px;
        }
    </style>
</head>

<body style="background-color: white;">
    <div class="console-container">
        <div style="width: 100%;margin-top: 50px;text-align: center;font-size: 38px;">
            <span id="welcome"></span>
        </div>
        <div style="width: 100%;margin-top: 30px;text-align: center;font-size: 30px;">
            <span id="time"></span>
        </div>
        <div style="width: 100%;margin-top: 20px;display: flex;justify-content: center;">
            <div class="huangli">
                <div id="md"></div>
                <div id="ymd"></div>
                <div class="nayin"><b>五行</b><i id="nayin"></i></div>
                <div class="chongsha"><b>冲煞</b><i id="chongsha"></i></div>
                <div class="pengzu"><b>彭祖</b><i id="pengzu"></i></div>
                <div class="xishen"><b>喜神</b><i id="xishen"></i></div>
                <div class="fushen"><b>福神</b><i id="fushen"></i></div>
                <div class="caishen"><b>财神</b><i id="caishen"></i></div>
                <div class="yiji" id="yi">
                    <b>宜</b>
                </div>
                <div class="yiji ji" id="ji">
                    <b>忌</b>
                </div>
                <div class="shen" id="jshen">
                    <b>吉神</b>
                </div>
                <div class="shen xiong" id="xshen">
                    <b>凶神</b>
                </div>
            </div>
        </div>
        <div style="width: 100%;margin-top: 10px;text-align: center;font-size: 15px;">
            <span>浏览器：</span><span id="browser"></span>
            <span style="margin-left: 10px;">版本：</span><span id="version"></span>
            <span style="margin-left: 10px;">内核：</span><span id="engine"></span>
            <span style="margin-left: 10px;">操作系统：</span><span id="os"></span>
            <span style="margin-left: 10px;">版本：</span><span id="osVersion"></span>
            <span style="margin-left: 10px;">设备：</span><span id="device"></span>
            <span style="margin-left: 10px;">语言：</span><span id="language"></span>
            <span style="margin-left: 10px;">分辨率：</span><span id="screen"></span>
        </div>
    </div>
</body>

<script>
    $(function() {
        var config = GetProjectConfig();
        //标题
        var welcomeText = "欢迎使用" + config.systemName
        $("#welcome").text(welcomeText);
        //浏览器
        var info = new Browser();
        $("#browser").text(info.browser)
        $("#version").text(info.version)
        $("#engine").text(info.engine)
        $("#os").text(info.os)
        $("#osVersion").text(info.osVersion)
        $("#device").text(info.device)
        $("#language").text(info.language)
        $("#screen").text(info.osWidth + '*' + info.osHeight)
        //时间
        bindTime();
        setInterval(bindTime, 1000);
        //万年历
        var d = Lunar.fromDate(new Date());
        $('#md').html('农历' + d.getMonthInChinese() + '月' + d.getDayInChinese());
        $('#ymd').html('<i>' + d.getYearGan() + d.getYearZhi() + d.getYearShengXiao() + '年</i><i>' + d.getMonthInGanZhi() + '月</i><i>' + d.getDayInGanZhi() + '日</i><i>星期' + d.getSolar().getWeekInChinese() + '</i>');
        $('#nayin').html(d.getDayNaYin());
        $('#chongsha').html('冲' + d.getChongDesc() + ' 煞' + d.getSha());
        $('#pengzu').html(d.getPengZuGan() + ' ' + d.getPengZuZhi());
        $('#xishen').html(d.getPositionXiDesc());
        $('#fushen').html(d.getPositionFuDesc());
        $('#caishen').html(d.getPositionCaiDesc());
        var yi = d.getDayYi();
        for (var i = 0, j = yi.length; i < j; i++) {
            $('#yi').append('<i>' + yi[i] + '</i>');
        }
        var ji = d.getDayJi();
        for (var i = 0, j = ji.length; i < j; i++) {
            $('#ji').append('<i>' + ji[i] + '</i>');
        }
        var jshen = d.getDayJiShen();
        for (var i = 0, j = jshen.length; i < j; i++) {
            $('#jshen').append('<i>' + jshen[i] + '</i>');
        }
        var xshen = d.getDayXiongSha();
        for (var i = 0, j = xshen.length; i < j; i++) {
            $('#xshen').append('<i>' + xshen[i] + '</i>');
        }

    })

    function bindTime() {
        var now = new Date();
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0'); // Months are zero-indexed
        const day = String(now.getDate()).padStart(2, '0');
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');
        const timeText = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        $("#time").text(timeText);
    }
</script>

</html>